<template>
    <div class="schedule-calendar-picker-list"
         v-if="visible">
        <div class="schedule-calendar-picker-col"
             style="width: 60%">
            <ul ref="yearList">
                <li v-for="n in endYear - beginYear"
                    :class="{ active: beginYear + n === year}"
                    @click="selectYear(beginYear + n)">{{beginYear + n}}</li>
            </ul>
        </div>
        <div class="schedule-calendar-picker-col"
             style="width: 40%">
            <ul ref="monthList">
                <li v-for="n in 12"
                    :class="{active: n === month + 1}"
                    @click="selectMonth(n - 1)">{{n}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        beginYear: {
            type: Number,
            default: 1900
        },
        endYear: {
            type: Number,
            default: 2100
        },
        year: Number,
        month: Number,
        visible: Boolean
    },
    watch: {
        visible (val) {
            if (!val) return;
            this.$nextTick(() => {
                this.$refs.yearList.querySelector('li.active').scrollIntoView();
                this.$refs.monthList.querySelector('li.active').scrollIntoView();
            });
        }
    },
    methods: {
        selectYear (year) {
            this.$parent.updateValue(year);
        },
        selectMonth (month) {
            this.$parent.updateValue(this.year, month);
        }
    }
};
</script>
<style lang="less">
@import "./variables.less";

.schedule-calendar-picker- {
  &list {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    width: 100%;
    font-size: @sc-base-font-size;
    color: @sc-gray-color;
    background: @sc-body-color;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
  }
  &col {
    overflow: hidden;
    height: @sc-picker-height;
    padding-bottom: 100%;
    &:first-child {
      border-right: 1px solid @sc-border-color;
    }
    ul,
    li {
      list-style: none;
    }
    ul {
      padding: 0;
      margin: 0;
    }
    li {
      padding: 0 12px;
      line-height: 30px;
      cursor: pointer;
      &:hover {
        background: lighten(@sc-primary-light-color, 8%);
      }
      &.active {
        color: @sc-primary-color;
        font-weight: bold;
      }
    }
    &:hover {
      overflow-y: auto;
    }
  }
}
</style>
